<template>
  <div>
    <dl class="user-poster">
      <dt class="avatar"> 
        <van-icon name="user"></van-icon>
        <!-- <img :src="avatar" alt=""> -->
        <!-- <van-uploader :after-read="onRead">
          <van-icon name="photograph"/>&nbsp;更换头像
        </van-uploader>        -->
        </dt>      
      <!-- <dd> 您好：{{this.$store.state.registerInfo.realName}}</dd> -->
      <dd>您好：{{this.$store.state.UserInfo.mobile}}</dd>
      <dd class="msg" @click.stop="toMsg"><van-icon name="envelop-o"/>消息</dd>
    </dl>
    <van-row class="user-links">
      <router-link to="/user/userpending">
        <van-col span="6">
          <van-icon name="peer-pay" />
          待付款
        </van-col>
      </router-link>
      <router-link to="/user/userdeliver">
        <van-col span="6" >
          <van-icon name="todo-list-o" />
          待发货
        </van-col>
      </router-link>

      <router-link to="/user/userreceive">
        <van-col span="6">
        <van-icon name="logistics" />
        待收货
      </van-col>
      </router-link>
      <router-link to="/user/usercompleted">
        <van-col span="6">
          <van-icon name="completed" />
          已完成
        </van-col>
      </router-link>

    </van-row>

    <van-cell-group>
      <van-cell icon="orders-o" title="全部订单" is-link to="/user/userorder"/>
      <van-cell icon="location-o" title="收货地址" is-link to="/user/useraddress"/>
      <van-cell icon="balance-list-o" title="线下结算" is-link to="/user/userbalance"/>
      <!-- <van-cell icon="pending-evaluate" title="消息中心" is-link to="/user/usermsg"/> -->
      <van-cell icon="edit" title="个人设置" is-link to="/user/usersetting"/>      
    </van-cell-group>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="关于盘丝冻" name="1" icon="info-o">
        <p>湖州磐丝冻科技有限公司（简称：盘丝冻）是一家专注于冷冻肉品批发的电商供应商，
          目前经营范围：鸡肉、牛肉、羊肉、海鲜，目前仅支持上海市内配送，浙江省冷冻仓库正在建设中。</p> 
      </van-collapse-item>
      <van-collapse-item title="使用帮助" name="2" icon="question-o">
        请您将选择的商品加入“常购清单”查看您可以享受的“专属优惠价”，之后从“常购清单”中选择商品加入购物车进行下单及后续操作。
      </van-collapse-item>
    </van-collapse>

      <van-button size="large" type="danger" @click.stop="signOut" class="sign-out-btn">
        退出登录
      </van-button>
    

  </div>
</template>

<script>
import { mapState } from 'vuex';
import { Row, Col, Icon, Cell, CellGroup ,Uploader, Button, Collapse, CollapseItem} from 'vant';
const avatar = require('@/assets/1.jpeg');
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Uploader.name]:Uploader,
    [Button.name]:Button,
    [Collapse.name]:Collapse,
    [CollapseItem.name]:CollapseItem,
  },  
  data() {
    return {
      pageTitle:'用户中心',
      username:'李小白',
      telephone:'13500001111',
      activeNames: [],
      avatar,
    }
  },
  methods: {
    onClickRight() {
      Toast('按钮');
    },
    toPending() {
      this.$router.push('/user/userpending');
    },
    onRead(file) {
      console.log(file);
    },
    backUp() {
      this.$router.go(-1);
    },
    toMsg() {
      this.$router.push('/user/usermsg');
    },
    signOut() {
      this.$dialog.confirm({
        title: '退出登录',
        message: '你确定要退出登录吗？',
        closeOnClickOverlay: true,
      }).then(() => {
        // on confirm
        this.$router.push('/login')
      }).catch(() => {
        // on cancel
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import '~style/common.less';
.user {
  &-poster {
    height: 180px;
    width: 100%;
    // background-image: url('@/assets/blue.jpg');
    background-image: url('../../assets/red.jpg');
    background-repeat:no-repeat; 
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    position: relative;
    text-align: center;
    // flex-direction: column;
    color: @bgColor;
    border: 0.1px solid transparent;
    dt {
      .font-dpr(22px);
      font-weight:bold;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }
    dd {
      .font-dpr(16px);
    }
    .msg {
      // border: 1px solid #fff;
      position: absolute;
      right: 15px;
      top: 15px;
      color: @bgColor;
      // vertical-align: center;
      // width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .font-dpr(14px);
      .van-icon {
        color: @bgColor;
        margin-right: 4px;
      }
    }
  }

  &-group {
    margin-bottom: 15px;
  }

  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;

    .van-icon {
      display: block;
      font-size: 24px;
      color: @priColor;
    }
  }
}
.van-cell {
  color: @priColor;
  &__title {
    color: @fontColorP;
    text-indent: 0.5em;
  }
}
.setting {
  position: absolute;
  right: 2.5em;
  top: 2.5em;
  color: @bgColor;
  &::before {
    .font-dpr(30px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
  }


}
  // 用户头像
  .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 1px solid blue;
    margin-top: 10%;
  } 
  .van-uploader {
    // border: 1px solid black;
    max-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .van-icon-photograph {
    // border: 1px solid blue;
    line-height: 24px;
    .font-dpr(12px);
  }
  .sign-out-btn {
    border: 1px solid blue;
    transform: translateY(50px);
  }
  .van-collapse-item__content {
    color: @fontColorP;
    .font-dpr(14px);
  }
  .van-uploader {
    .font-dpr(14px);
    color: @bgColor;
    font-weight: 400;
  }

  .van-dialog__footer--buttons .van-button {
    transform: translateY(0);
  }
  .van-dialog__confirm, .van-dialog__confirm:active {
    color: @priColor;
  }
</style>

